<template>
	<div id="container">
		<ul class="goods">
			<li class="content" v-for="item in goodsLists" style="list-style: none;">
				<div class="divbigImg">
					<a href="" class="bigImgSize" target="_blank">
						<img class="bigImg" src="@/assets/equipments/e001.jpg" title="折叠式太阳能板" alt="折叠式太阳能板">
					</a>
				</div>
				<div class="divgoodImgLists">
					<ul class="goodImgLists" v-for="imgs in item.goodImgLists">
						<li>
							<img class="goodImg" :src="imgs.url">
						</li>
					</ul>
				</div>
				<div class="brief">
					<span class="goods_name">{{item.goodsName}}</a></span>
					<span class="goods_desc">{{item.goodsDescription}}</span>
					<span class="goods_price">￥ {{item.goodsPrice}}</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				goodsLists: [{
					goodsId: '111',
					goodsName: '设备1',
					goodsPrice: '123',
					goodsDescription: '测试asdfasdfasdf asdfasdf啊顺丰到付阿斯顿发射点发生发射点发射点发设备',
					goodImgLists: [{
						url: require('@/assets/equipments/e001.jpg'),
					}, {
						url: require('@/assets/equipments/e002.jpg'),
					}, {
						url: require('@/assets/equipments/e003.jpg'),
					}, ]
				}, {
					goodImgLists: [{
						url: require('@/assets/equipments/e001.jpg'),
					}, {
						url: require('@/assets/equipments/e002.jpg'),
					}, {
						url: require('@/assets/equipments/e003.jpg'),
					}, ]
				}, {
					goodImgLists: [{
						url: require('@/assets/equipments/e001.jpg'),
					}, {
						url: require('@/assets/equipments/e002.jpg'),
					}, {
						url: require('@/assets/equipments/e003.jpg'),
					}, ]
				}, {

				}, {

				}, {

				}, ],
			}
		}
	}
</script>

<style>
	.goods_price {
		height: 30px;
		font-size: 28px;
		color: #ff0000;
		/* background-color: #00ff00; */
	}

	.goods_desc {
		width: 300px;
		height: 20px;
		/* background-color: #0000ff; */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 3px;
	}

	.goods_name {
		height: 28px;
		font-size: 18px;
		/* background-color: #ff0000; */
		margin-bottom: 3px;

	}

	.brief {
		/* background-color: #ffaaff; */
		height: 93px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.divbigImg {
		width: 304px;
		height: 265px;
		background-color: #247f4a;
	}

	.bigImg {
		width: 230px;
		height: auto;
		background-color: #b1b1b1;
		margin-top: 40px;
	}



	#container {
		width: 1300px;
		height: auto;
		background-color: #ffff7f;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		margin: 0 auto;
	}

	.goods {
		padding-left: 12px;
	}

	.goods ul {
		width: 1500px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.goods li {
		background-color: #ff55ff;
		width: 304px;
		height: 420px;
		margin: 8px 8px 8px 8px;
		float: left;

	}

	.divgoodImgLists {
		width: 304px;
		height: 62px;
		background-color: #55ffff;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

	}


	.goodImg {
		width: 50px;
		height: 50px;
	}

	.divgoodImgLists ul {
		list-style: none;
		height: 50px;
		width: 10px;
		margin: 0 auto;
		background-color: #ff5500;
	}



	.goodImgLists li {
		all: initial;
		background-color: #000000;
		width: 50px;
		height: 50px;
		margin-right: 40px;
		/* 	margin-right: 10px; */
	}
</style>